<template>
  <div class="pop">
    <el-form label-width="100px" :rules="rules" :model="form">
      <div v-if="canReject">
        <el-form-item label="是否同意">
          <el-radio-group v-model="form.isReject">
            <el-radio label="0">同意</el-radio>
            <el-radio label="1">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div v-if="show(['4'])">
        <el-form-item label="审批说明">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
      </div>
      <div v-if="isNextUser">
        <el-form-item label="处理人" prop="nextUser">
          <treeselect
            v-model="form.nextUser"
            :options="list"
            :normalizer="normalizer"
            disable-branch-nodes
            multiple
            append-to-body
            :zIndex="9999"
            style="width: 212px;"
            placeholder="填写表单后选择下一节点处理人"
          />
        </el-form-item>
      </div>
      <div class="pop-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button v-if="show(['1'])" size="mini" @click="save">保 存</el-button>
        <el-button v-if="show(['3'])" size="mini" type="primary" @click="apply">上 报</el-button>
        <el-button size="mini" v-if="show(['4'])" type="primary" @click="approve">确 定</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getNextUsers, getReject } from '@/api/wf/workflow'

export default {
  name: 'WorkFlowPop',
  props: {
    procDefkey: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    row: {
      type: Object,
      required: true
    }
  },
  computed: {
    isNextUser: function() {
      return this.show(['3','4']) && !this.isEnd && this.form.isReject == '0' && !this.dueAuto
    },
    canReject: function() {
      return this.show(['4']) && this.rejectTo
    }
  },
  data() {
    return {
      form: {
        isReject: '0',
        description: '',
        // 下个节点是否会签
        multi: false,
        nextUser: null
      },
      rejectTo: null,
      dueAuto: false,
      rules: {
        nextUser: [
          { required: true, message: '请选择处理人', trigger: 'blur' }
        ]
      },
      list: [],
      type: [],
      isEnd: true
    }
  },
  mounted() {
    this.list = []
    this.type = this.row.btnList || []
    // 获取下一节点处理人
    if (this.show(['3','4'])) {
      this.$nextTick(()=>{
        this.loadOptions()
      })
    }
    // 获取驳回按钮的目标
    if (this.show(['4'])) {
      this.loadReject()
    }
  },
  methods: {
    loadReject() {
      getReject(this.row.instanceId).then(res => {
        this.rejectTo = res.data.reject
        this.dueAuto = res.data.dueAuto
      })
    },
    loadOptions() {
      const param = {
        procInstId: this.row.instanceId,
        procDefkey: this.procDefkey,
        entity: this.row
      }
      getNextUsers(param).then(res => {
        this.form.multi = res.data.id === '-3'
        this.isEnd = res.data.id === '-4'
        this.list = res.data.children || []
      })
    },
    normalizer(node) {
      if (node.children == null || !node.children.length) {
        delete node.children
      }

      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    show(val) {
      const type = this.type
      const index = val.findIndex(it=>type.indexOf(it) >= 0)
      return index != -1
    },
    save() {
      this.$emit('save', this.row)
    },
    apply() {
      if (!this.form.nextUser) {
        this.$message({
          message: '请选择下级处理人！',
          type: 'error'
        })
        return
      }
      this.row = Object.assign(this.row, this.form)
      this.$emit('apply', this.form, this.row)
    },
    approve() {
      if (this.form.isReject == '0' && !this.isNextUser) {
        this.$message({
          message: '请选择下级处理人！',
          type: 'error'
        })
        return
      }
      this.form.id = this.row.id
      this.form.procInstId = this.row.procInstId
      if (this.form.isReject == '1') {
        this.form.procDefkey = this.rejectTo
        this.$emit('reject', this.row, this.form)
      } else {
        this.$emit('approve', this.row, this.form)
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .pop-footer {
    text-align: center;
    margin-top: 30px;
  }

  .pop {
    ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
      height: 30px;
      line-height: 30px;
    }

    ::v-deep .el-dialog__footer {
      padding: 10px 0px 0px;
    }

    ::v-deep .el-dialog__body {
      padding: 25px 25px 0px;
    }
  }
</style>
